<template>
	<div >
	  <div class="head"><img src="../../assets/书城/shape_u112.png" alt="" srcset="">书籍详情</div>
	  <img src="../../assets/书城/分割线_u3221.png" alt="" srcset="">
	  <ul>
		  <li v-for="(value,key,index) in books" :key="index">
		  <img :src="value.img" alt=""><div class="left">
			  <p class="name">{{value.name}}</p>
			  <p class="title">{{value.title}}</p>
			  <p class="author">{{value.author}}</p>
		  </div></li>
	  </ul>
	</div>
  </template>
  
  <script>
  export default {
  data(){
	  return{
		  books:{
			  book1:{
				  name:'龙之王冠',
				  title:'3010年，世界战争爆发。在经历了长达10年的屠杀战争之后，世界分成了2个大陆…',
				  img:require('@/assets/书城/u340.png'),
				  author:'荆棘糖浆'
			  },
			  book2:{
				  name:'末世重生',
				  title:'逃离A区的时候，当爷爷用尽最后的力量将她送出去时，她才知道自己被身边最好的…',
				  img:require('@/assets/书城/u343.png'),
				  author:'谭四姑娘'
			  },
			  book3:{
				  name:'武道神尊',
				  title:'中元大陆，群雄并立，万道争锋。 少年秦鸿得灵火，炼真身，闯秘境，夺造化，报血…',
				  img:require('@/assets/书城/u337.png'),
				  author:'冷剑'
			  },
			  book4:{
				  name:'超级搬砖狂少',
				  title:'赫然他带着一腔热血，从海外归来。迎接他的居然是一个未婚妻！ 他身怀绝技,他还…',
				  img:require('@/assets/书城/u346.png'),
				  author:'狐大仙森'
			  },
			  book5:{
				  name:'龙之王冠',
				  title:'3010年，世界战争爆发。在经历了长达10年的屠杀战争之后，世界分成了2个大陆…',
				  img:require('@/assets/书城/u349.png'),
				  author:'荆棘糖浆'
			  },
			  book6:{
				  name:'末世重生',
				  title:'逃离A区的时候，当爷爷用尽最后的力量将她送出去时，她才知道自己被身边最好的…',
				  img:require('@/assets/书城/u352.png'),
				  author:'谭四姑娘'
			  },
			  book7:{
				  name:'武道神尊',
				  title:'中元大陆，群雄并立，万道争锋。 少年秦鸿得灵火，炼真身，闯秘境，夺造化，报血…',
				  img:require('@/assets/书城/u389.png'),
				  author:'冷剑'
			  },
			  book8:{
				  name:'超级搬砖狂少',
				  title:'赫然他带着一腔热血，从海外归来。迎接他的居然是一个未婚妻！ 他身怀绝技,他还…',
				  img:require('@/assets/书城/u402.png'),
				  author:'狐大仙森'
			  },book9:{
				  name:'龙之王冠',
				  title:'3010年，世界战争爆发。在经历了长达10年的屠杀战争之后，世界分成了2个大陆…',
				  img:require('@/assets/书城/u415.png'),
				  author:'荆棘糖浆'
			  },
			  book10:{
				  name:'末世重生',
				  title:'逃离A区的时候，当爷爷用尽最后的力量将她送出去时，她才知道自己被身边最好的…',
				  img:require('@/assets/书城/u431.png'),
				  author:'谭四姑娘'
			  },
			  book11:{
				  name:'武道神尊',
				  title:'中元大陆，群雄并立，万道争锋。 少年秦鸿得灵火，炼真身，闯秘境，夺造化，报血…',
				  img:require('@/assets/书城/u447.png'),
				  author:'冷剑'
			  },
			  book12:{
				  name:'超级搬砖狂少',
				  title:'赫然他带着一腔热血，从海外归来。迎接他的居然是一个未婚妻！ 他身怀绝技,他还…',
				  img:require('@/assets/书城/u451.png'),
				  author:'狐大仙森'
			  }
		  }
	  }
  }
  }
  </script>
  
  <style lang="less" scoped>
  .head{font-size: 2rem;
	  line-height: 5rem;
	  width: 100%;
	  height: 5rem;
	  text-align: center;
	  position: relative;
	  img{position:absolute;
		  top: 2rem;
		  left: 1rem;
		  float: left;
	  }
  }
  ul{
	  li{overflow: hidden;
		 
		  img{float: left; margin: 1.5rem 1.5rem;}
		  .left{float: left;
			  width: 25rem;
			 margin-top: 1rem;
			  .name{margin: 1rem 0;
	  font-family: 'PingFangSC-Regular', 'PingFang SC';
	  font-weight: 400;
	  font-style: normal;
	  font-size: 1.6rem;
	  color: #000000;
   }
  .title{
	  font-family: 'PingFangSC-Regular', 'PingFang SC';
	  font-weight: 400;
	  font-style: normal;
	  color: #666666;
	  
  }
  .author{   margin-top: 1.5rem;  font-family: 'PingFangSC-Regular', 'PingFang SC';
	  font-weight: 400;
	  font-style: normal;
	  font-size: 12px;
	  color: #999999;
	 
	 }
		  }
	  }
  }
  
  </style>